import React, { Component } from 'react'
import { Icon } from 'react-vant';
import { ActionBar } from 'react-vant';
import axios from '../utils/request'
import { Toast } from 'react-vant';

export default class ShopDetail extends Component {

    state = {
        list: []
    }

    go() {
        this.props.history.go(-1)
    }

    state = {
        list: this.props.location.state
    }

    gwc() {
        this.props.history.push('/shopcar')
    }

    addcar(list) {
        axios({
            url: '/api/addShopCar',
            method: 'post',
            data: {
                id: list.id,
                img: list.img2,
                name: list.name,
                price: list.price,
                introduce: list.introduce,
                jia: list.jia,
                num: list.num
            }
        }).then(res => {
            console.log(res);
            if (res.data.code === 200) {
                Toast.success('添加成功');
            } else {
                Toast.fail('添加失败');
            }
        })
    }

    render() {
        const { list } = this.state
        // console.log(list);

        return (
            <div className='wrap'>
                <header>
                    <div className="detail">
                        <Icon name="arrow-left" className='icons' onClick={() => { this.go() }} />
                        <span>商品详情</span>
                    </div>
                </header>
                <main>
                    {
                        <div className="detailList">
                            <img src={list.img2} alt="" />
                            <p>{list.name}</p>
                            <p>{list.introduce}</p>
                        </div>
                    }
                </main>
                <footer>
                    <ActionBar>
                        <ActionBar.Icon icon="chat-o" color="#ee0a24" text="联系客服" />
                        <ActionBar.Icon icon="cart-o" text="购物车" onClick={() => { this.gwc() }} />
                        <ActionBar.Button type="warning" text="加入购物车" onClick={() => { this.addcar(list) }} />
                        <ActionBar.Button type="danger" text="立即购买" />
                    </ActionBar>
                </footer>
            </div>
        )
    }
}
